<template>
  <div class="cc-year-month-dialog row" v-if="local.type==='yearmonth'">
    <div class="col row">
      <div>
        <q-btn
          icon="mdi-chevron-left"
          dense
          outline
          flat
          class="q-ma-sm cc-year-month-btn"
          @click="changeYear(-1)"
        />
      </div>
      <div class="col row justify-center items-center">
        <q-btn :label="local.year" dense outline flat class="cc-year-month-btn" @click="selYear()" />
      </div>
      <div>
        <q-btn
          icon="mdi-chevron-right"
          dense
          outline
          flat
          class="q-ma-sm cc-year-month-btn"
          @click="changeYear(1)"
        />
      </div>
    </div>
    <div class="col row">
      <div>
        <q-btn
          icon="mdi-chevron-left"
          dense
          outline
          flat
          class="q-ma-sm cc-year-month-btn"
          @click="changeMonth(-1)"
        />
      </div>
      <div class="col row justify-center items-center">
        <q-btn
          :label="months[local.month-1]"
          dense
          outline
          flat
          class="cc-year-month-btn"
          @click="selMonth()"
        />
      </div>
      <div>
        <q-btn
          icon="mdi-chevron-right"
          dense
          outline
          flat
          class="q-ma-sm cc-year-month-btn"
          @click="changeMonth(1)"
        />
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    local: {
      type: Object,
      required: true,
    },
  },
  data() {
    return {
      year: 2022,
      month: 2,
      months: '一月_二月_三月_四月_五月_六月_七月_八月_九月_十月_十一月_十二月'.split('_'),
      start: 0,
      colList: [0, 1, 2, 3],
      rowList: [0, 1, 2],
    };
  },
  created() {

  },
  mounted() {
  },
  methods: {
    selYear() {
      this.local.showMonth = false;
      this.$emit('calcText');
    },
    selMonth() {
      this.local.showMonth = true;
      this.$emit('calcText');
    },
    changeYear(v) {
      this.local.year += v;
      this.$emit('calcText');
    },
    changeMonth(v) {
      if (this.local.month + v >= 1 && this.local.month + v <= 12) {
        this.local.month += v;
        this.$emit('calcText');
      }
    },
  },
};
</script>

<style scoped lang="stylus">
.cc-year-month-dialog
  width 270px
  .cc-year-month-btn
    margin 3px
    font-weight 400
</style>
